<template>
  <el-container ref="container">
    <el-header ref="filterHeader" height="auto">
      <slot name="header"></slot>
    </el-header>
    <el-main>
      <slot :clientHeight="clientHeight" name="main"></slot>
    </el-main>
    <el-footer ref="footer" height="30px">
      <el-row type="flex" justify="end" align="middle">
        <slot name="footer"></slot>
      </el-row>
      <slot></slot>
    </el-footer>
  </el-container>
</template>

<style lang="scss">
@import "@/assets/styles/list-layout.scss";
</style>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'mainContainerHeight'
    ])
  },
  watch: {
    mainContainerHeight: function (newHeight, oldHeight) {
      this.resize()
    }
  },
  data () {
    return {
      clientHeight: 500,
      temp: 0
    }
  },
  methods: {
    resize () {
      var that = this
      that.clientHeight = that.mainContainerHeight - this.$refs.filterHeader.$el.clientHeight - this.$refs.footer.$el.clientHeight - 40// 40来至与两个container 的 padding
    }
  },
  mounted () {
    var that = this
    this.$nextTick(function () {
      that.resize()
    })
  }
}
</script>
